<template>
  <div class="box">
    <header-top title="查询分析" />
    <div class="main">
        <!-- <div
        @click="handleGoToPath(hoverData.name)"
        v-for="hoverData in hoverTabData"
        :key="hoverData.name"
      > -->
        <div v-for="hoverData in hoverTabData" :key="hoverData.name" @click="queryClick(hoverData.name)">
          <hover-tab
            :name="hoverData.name"
            :content="hoverData.content"
            :picsrc="hoverData.picsrc"
            :column="column"
          />
      </div>
    </div>
  </div>
</template>
<script>
import headerTop from "../components/HeaderTop";
import HoverTab from "./components/HoverTab";
export default {
  name: "query",
  components: {
    headerTop,
    HoverTab,
  },
  data() {
    return {
      hoverTabData: [
        {
          name: "operate",
          content: "运营日报",
          picsrc: "../../../images/query/yunying.png",
        },
        {
          name: "plan",
          content: "计划指标",
          picsrc: "../../../images/query/jihua.png",
        },
        {
          name: "production",
          content: "生产日报",
          picsrc: "../../../images/query/shengchang.png",
        },
        {
          name: "carReport",
          content: "车辆报告",
          picsrc: "../../../images/query/car.png",
        },
        {
          name: "faultReport",
          content: "故障报告",
          picsrc: "../../../images/query/guzhang.png",
        },
        {
          name: "consumption",
          content: "能耗指标",
          picsrc: "../../../images/query/nenghaozhibaio.png",
        },
        {
          name: "knowledgeBase",
          content: "知识库",
          picsrc: "../../../images/query/zhishiku.png",
        },
      ],
      column: 3,
    };
  },
  methods: {
    queryClick(name){
      console.log(name);
      if (name) {
        this.$router.push(name);
      }
    }
  },
};
</script>
<style lang="stylus" scoped>
.box{
    background-color #f5f5f5
    height 100vh
    .main{
        width 345px
        background-color #fff
        border-radius 5px
        margin 10px 0 0 15px
        display flex
        justify-content flex-start
        text-align center
        flex-wrap wrap
        color #333333
        font-size 13px
        line-height 25px
        font-weight bold

    }
}
</style>
